import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    GridComponent,
    DataZoomComponent,
    TooltipComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { SVGRenderer, SvgChart } from '@wuba/react-native-echarts';
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window')

echarts.use([SVGRenderer, GridComponent, BarChart, TooltipComponent, DataZoomComponent, GridComponent, TitleComponent]);

export default function ZoomHorizontalbar(props) {
    const skiaRef = useRef(null);
    function formatNumber(num) {
        // 如果数值大于等于10000，除以10000，保留一位小数，加上w后缀
        if (num >= 10000) {
            return (num / 10000).toFixed(1) + 'w';
        }
        // 如果数值大于等于1000，除以1000，保留一位小数，加上k后缀
        else if (num >= 1000) {
            return (num / 1000).toFixed(1) + 'k';
        }
        // 否则，直接返回数值
        else {
            return num;
        }
    }
    useEffect(() => {
        // prettier-ignore
        let dataAxis = props.labels || [];
        // prettier-ignore
        let data = props.series || [];
        let yMax = 500;
        let dataShadow = [];
        for (let i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }
        const option = {
            title: {
                text: '特性示例：渐变色 阴影 点击缩放',
                subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom',
                show: false
            },
            xAxis: {
                data: dataAxis,
                "axisLine": {
                    "show": false  //隐藏x轴线
                },
                "axisTick": {
                    "show": false //隐藏x轴刻度
                },
                axisLabel: {
                    rotate: 45,
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    formatter: function (value, index) {
                        return formatNumber(value);
                    }
                },
                name: '单位（元）',
                max: (props.series[0] % 5 === 0 ? props.series[0] : Math.ceil(props.series[0] / 5) * 5) || 10000
            },
            grid: {
                top: 35,
                right: 0,
                bottom: 65
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            dataZoom: [
                {
                    type: 'inside',
                    // 设置start和end属性，表示初始显示前10个柱子
                    start: 0,
                    end: (10 / data.length) * 100
                }
            ],
            series: [
                {
                    type: 'bar',
                    showBackground: false,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#e7e5fc' },
                            { offset: 0.5, color: '#887ef2' },
                            { offset: 1, color: '#887ef2' }
                        ]),
                        borderRadius: 5,
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#8177e5' },
                                { offset: 0.7, color: '#8177e5' },
                                { offset: 1, color: '#ada6f6' }
                            ])
                        }
                    },
                    data: data
                }
            ]
        };
        let chart;
        if (skiaRef.current) {
            chart = echarts.init(skiaRef.current, 'light', {
                renderer: 'svg',
                width: width - 34,
                height: (width - 34) * 0.8,
            });
            // Enable data zoom when user click bar.
            const zoomSize = 10;
            chart.on('click', function (params) {
                console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                props.onPress && props.onPress(dataAxis[params.dataIndex])
                chart.dispatchAction({
                    type: 'dataZoom',
                    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                    endValue:
                        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                });
            });
            chart.setOption(option);
        }
        return () => chart?.dispose();
    }, []);

    // return <SkiaChart ref={skiaRef} />;
    return <SvgChart ref={skiaRef} />;
}